<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="login.css">
    <script src="js/jquery.1.8.js" type="text/javascript"></script>
    <script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="app">
    <div class="out">

    <div class="top">
        vue实训
   </div>

    <div class="text">
        <input type="text" v-model="loginName" placeholder="请输入用户名"/>
    </div>

    <div class="text">
        <input type="text" v-model="pwd"  placeholder="请输入密码"/>
    </div>

    <div class="buttom" @click="login">
        登录
   </div>

    </div>
</div>
    
</body>
<script>
    var vm=new Vue({
        el:'#app',
        data:{
            loginName:'',
            pwd:''
        },
        methods:{
            login(){
                $.ajaxSetup({
                    contentType:"application/json;charset=utf-8"
                });
                var data={'loginName':this.loginName,'pwd':this.pwd}
                $.post("http://api.tutestudio.net/api/login",JSON.stringify(data),function(res){
                    if(res.code==200){
                        alert('登录成功')
                        location.href='home.html'
                    }
                    else{
                        alert('登录失败')
                    }
                })           }
        }
    })
</script>
</html>